import { useState, forwardRef, useMemo } from 'react';
import { View, Text } from '@tarojs/components';
import CityUserPicker from '@/components/CityUserPicker';
import DcityUserPicker from '@/components/CityDemandPicker';
import cssModule from './index.module.scss';

/**
 * @description tabs
 * @author Shawn
 */

// 组件接收的参数
interface NavigationBarProps {
  type?: string; // 类型
  isGetLocation?: boolean; // 是否获取位置
  childrenTabs: any[]; // 子选项卡列表
  childrenIndex?: number; // 子选项卡索引
  location?: any; // 位置
  isShowCityPicker?: boolean; // 是否显示城市选择器
  onTabChange?: (value: any) => void;
  onRegionChange?: (region: string) => void;
  locationIds?: {
    provinceId: string;
    cityId: string;
    districtId: string;
  }
}

const ChildrenTabs = forwardRef<{ refresh: () => void }, NavigationBarProps>(({ type, childrenTabs = [], childrenIndex, onTabChange, onRegionChange, location, locationIds, isShowCityPicker = true, isGetLocation = true }) => {

  // tab 选中索引
  const [activeIndex, setActiveIndex] = useState(childrenIndex ?? 0);

  // 选择推荐排序
  const handleRecommend = (tab: any, idx: number) => {
    setActiveIndex(idx);
    onTabChange?.(tab.value);
  }

  // 选择地区id回调
  const handleRegionIdChange = (id: string) => {
    onRegionChange?.(id);
  };

  const locationIdsList = useMemo(() => {

    const { provinceId, cityId, districtId } = locationIds || {};
    return [provinceId, cityId, districtId]?.join?.(',');
  }, [locationIds]);

  return (
    <View className={cssModule.container}>
      <View className={cssModule.tabs}>
        {childrenTabs.map((tab, idx) => (
          <Text
            key={idx}
            className={`${cssModule.tabText} ${activeIndex === idx ? cssModule.active : ''}`}
            onClick={() => handleRecommend(tab, idx)}
          >
            {tab.name}
          </Text>
        ))}
      </View>
      {
        isShowCityPicker && (
          type === 'publicFriend' ? (
            <CityUserPicker onRegionIdChange={handleRegionIdChange} value={locationIdsList} >
              {(regionText: string) => {
                let processedText = regionText ? regionText.replaceAll('全部', '') : (location?.data?.city || (isGetLocation ? '正在获取位置' : '全国'));
                processedText = processedText.trim().split(' ')
                processedText = processedText[processedText.length - 1]
                return (
                  <View className={cssModule.cityPicker}>
                    <Text className={cssModule.cityText}>{processedText ? (processedText.length > 4 ? processedText.slice(0, 4) + '...' : processedText) : '选择地区'}</Text>
                    <Text className={cssModule.arrow}>▼</Text>
                  </View>
                );
              }}
            </CityUserPicker>
          ) : (
            <DcityUserPicker onRegionIdChange={handleRegionIdChange} value={locationIdsList} >
              {(regionText: string) => {
                let processedText = regionText ? regionText.replaceAll('全部', '') : (location?.data?.city || (isGetLocation ? '正在获取位置' : '全国'));
                processedText = processedText.trim().split(' ')
                processedText = processedText[processedText.length - 1]
                return (
                  <View className={cssModule.cityPicker}>
                    <Text className={cssModule.cityText}>{processedText ? (processedText.length > 4 ? processedText.slice(0, 4) + '...' : processedText) : '选择地区'}</Text>
                    <Text className={cssModule.arrow}>▼</Text>
                  </View>
                );
              }}
            </DcityUserPicker>
          )
        )
      }
    </View>
  );
});

export default ChildrenTabs;
